<template>
  <div id="app">
    <el-menu
      :default-active="1"
      class="el-menu-vertical-demo"
      background-color="rgb(23,28,58)"
      text-color="#fff"
      active-text-color="blue"
      style="height: 100%; width: 5%; position: fixed; text-align: center"
    >
      <div
        style="
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: rgb(0, 110, 255);
          margin-left: 16px;
          margin-top: 10px;
          margin-bottom: 10px;
        "
      >
        <span
          style="
            color: white;
            font-size: 17px;
            line-height: 50px;
            font-weight: bold;
          "
          >Logo</span
        >
      </div>
      <el-menu-item
        v-for="item in tabs"
        :key="item.index"
        :index="item.index"
        @click="Tiao(item)"
      >
        <component style="width: 35px" :is="item.icon" />
      </el-menu-item>
    </el-menu>
    <div style="width:95%;height:100%;margin-left: 95px;">
      <div style="width: 100%; height: 7%;background:white;">
        <el-icon style="float:right; margin-top: 20px; margin-right: 300px;font-size:28px;"><BellFilled /></el-icon>
        <img style="width:60px;margin-top:10px;float:right;margin-right: -100px;" src="../component/WYK/img/bb.png"/>
        <p style="float:right;margin-right: -185px;margin-top:22px;font-size:20px;">客服七尾</p>
      </div>
      <div style="width: 95.5%; height: 93%;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import {
  House,
  ChatDotSquare,
  Phone,
  User,
  Document,
  Headset,
  Coordinate,
  Calendar,
  DocumentCopy,
  Setting,
  Edit,
  BellFilled,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const tabs = [
  { index: 1, name: "首页", path: "/index/home", icon: House },
  { index: 2, name: "会话", path: "/index/hui", icon: ChatDotSquare },
  { index: 3, name: "通话", path: "/index/tong", icon: Phone },
  { index: 4, name: "访客", path: "/index/fang", icon: User },
  { index: 5, name: "历史话术", path: "/index/historyhua", icon: Document },
  { index: 6, name: "记录", path: "/index/jilu", icon: Headset },
  { index: 7, name: "客户", path: "/index/kehu", icon: Coordinate },
  { index: 8, name: "工作", path: "/index/work", icon: Calendar },
  { index: 9, name: "数据", path: "/index/data", icon: DocumentCopy },
  { index: 10, name: "设置", path: "/index/set", icon: Setting },
  { index: 11, name: "退出", path: "/login", icon: Edit },
];

const Tiao=(item)=>{
  router.push(item.path);
  if(item.path == '/login'){
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
  }
}
</script>
  
<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color:rgb(215, 226, 241);
}
</style>